<template>
    <view>
        <base-common></base-common>
        <!-- 微信通过手机号一键登录 -->
        <view class="login-planel">
            <view class="login-row">
                <button v-if="!bindInfo.binded && showLogin" class="login-btn" open-type="getPhoneNumber"
                    @getphonenumber="getUserPhoneNumber">一键授权快速登录</button>
                <button v-if="bindInfo.binded && showLogin" class="login-btn"
                    @click="reLogin">一键授权快速登录</button>
                <!-- <view @tap="webLogin" class="login-text">输入手机号登录/注册</view> -->
            </view>
            <view class="protocol">
                <view class="back-btn" @click="goHome">暂不登录</view>
                <view class="bottom-view">
                    <uni-icons class="radio-icon" v-if="!protocolChecked" color="#C2C2C2" type="circle" size="18" @click="protocolChecked = !protocolChecked"></uni-icons>
                    <uni-icons class="radio-icon" v-if="protocolChecked" color="#428AF6" type="checkbox-filled" size="18" @click="isReadProtocol = !protocolChecked"></uni-icons>
                    <text>已阅读并同意</text><text class="blue-text" @click="viewProtocol">《隐私协议》</text>
                </view>
            </view>
        </view>
        <privacy-dialog ref="privaPop" source='index' :maskFlag="false" :urlTitle="urlTitle"
            @privacyDio="privacyDio"></privacy-dialog>
    </view>
</template>

<script>
    // 隐私弹框
    import privacyDialog from '@/components/privacy-dialog/privacy-dialog.vue'
    import {
        apiBindingLogin,
        apiWxLogin,
        apiWxReLogin
    } from '@/api/user/user.js'
    import {
        mapActions
    } from "vuex"
    export default {
        components: {
            privacyDialog
        },
        data() {
            return {
                showLogin: true,
                wxcode: '',
                bindInfo: {
                    binded: false,
                    openid: "",
                    u2at: null,
                    unionid: ""
                },
                protocolChecked: false,
                urlTitle: '',
            }
        },
        onShow() {
            if (wx.getPrivacySetting) {
            	  wx.getPrivacySetting({
            		//获取是否需要弹出
            		success: res => {
            		  // console.log("是否需要授权：", res.needAuthorization, "隐私协议的名称为：", res.privacyContractName)
            		  if(res.needAuthorization){
            			this.urlTitle=res.privacyContractName
            			this.$refs.privaPop.open()
            		  }else{
            		  }
            		},
            		fail: () => {},
            		complete: () => {},
            	  });
            } else {
            	console.log('版本过低无需授权-直接使用')
            }
        },
        onLoad(option) {
            uni.removeStorageSync('Access-Token');
            let _this = this
            // #ifdef MP-WEIXIN
            wx.login({
                success(res) {
                    if (res.code) {
                        // console.log('wxcode:'+ res.code)
                        //发起网络请求
                        _this.bindingEnhance(res)
                    } else {
                        console.log('登录失败！' + res.errMsg)
                    }
                }
            })
            // #endif
        },
        methods: {
            ...mapActions(["doLogin"]),
            // 隐私协议弹框-拒绝隐私协议
            privacyDio() {},
            reLogin() {
                this.checkPrivacyDio().then((ok) => {
                    if (ok) {
                        this.protocolChecked = true
                        this.doLogin({
                            token: this.bindInfo.u2at,
                            openId: this.bindInfo.openid,
                            unionId: this.bindInfo.unionid
                        })
                        this.toPage()
                    }
                }).catch(err => {})
                
            },
            // 检查是否同意隐私协议
            checkPrivacyDio() {
                return new Promise((resolve, reject) => {
                    console.log(this.protocolChecked)
                    if (!this.protocolChecked) {
                        uni.showModal({
                            content: "是否同意并阅读隐私协议",
                            success: (modal) => {
                                if (modal.confirm) {
                                    resolve(true)
                                } else {
                                    reject(false)
                                }
                            }
                        })
                        
                    } else {
                        resolve(true)
                    }
                })
            },
            bindingEnhance(res) {
                let _this = this
                apiBindingLogin({
                    wxCode: res.code
                }).then(res => {
                    if (res.code === 200) {
                        this.bindInfo = res.data
                    } else {
                        this.showLogin = false
                    }
                }).catch(err => {
                    this.showLogin = false
                })
            },
            getUserPhoneNumber(e) {
                let detail = e.detail
                let _this = this
                if (detail.errMsg.indexOf(':ok') > -1) {
                    uni.checkSession({
                        success() {
                            if (!_this.protocolChecked) {
                                uni.showModal({
                                    content: "是否同意并阅读隐私协议",
                                    success: (modal) => {
                                        if (modal.confirm) {
                                            _this.protocolChecked = true
                                            _this.loginWithPhone(detail)
                                        }
                                    }
                                })
                            } else {
                                _this.loginWithPhone(detail)
                            }
                            // uni.setStorageSync('bindList', _this.storageBindList)
                        },
                        fail() {
                            
                        }
                    })
                }
                // this.doLogin(e.detail) // 集团登录没有新版本
            },
            webLogin() {
                uni.navigateTo({
                    url: '/pages/login/phoneLogin'
                })
            },
            // 执行登录
            loginWithPhone(data) {
                let _this = this
                if(data.errMsg.indexOf(':ok') > -1) {
                    wx.login({
                    	success(res) {
                            if (res.code) {
                                apiWxLogin({
                                    wxCode: res.code,
                                    phoneData: data.encryptedData,
                                    phoneIv: data.iv
                                }).then(demand => {
                                    if (demand.code === 200) {
                                        // 往storage放数据
                                        _this.doLogin({
                                            token: demand.data.u2at,
                                            openId: demand.data.wxOpenId,
                                            unionId: demand.data.wxUnionId
                                        })
                                        _this.toPage()
                                    }
                                })
                            } else {
                                console.log('登录失败！' + res.errMsg)
                            }
                        }
                    })
                }
                
                
            },
            // 跳转到指定页面
            toPage() {
                if (uni.getStorageSync('origin')) {
                    let url = uni.getStorageSync('origin')
                    uni.setStorageSync('origin', '')
                    uni.redirectTo({
                        url,
                        fail(){
                            // 处理跳转tabbar页面情况
                            uni.switchTab({
                                url
                            })
                        }
                    })
                } else {
                    uni.switchTab({
                        url: "/pages/index/index"
                    })
                }
            },
            // 不登录返回首页
            goHome() {
                uni.switchTab({
                    url: "/pages/index/index"
                })
            },
            // 查看隐私协议
            viewProtocol() {
                uni.navigateTo({
                    url: '/pages/login/protocol'
                })
            }
        }
    }
</script>

<style lang="scss">
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    
    .login-planel {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        height: 100vh;

        .login-row {
            width: 100%;
            text-align: center;

            .login-btn {
                width: 60%;
                background-color: #FD453D;
                color: #FFFFFF;
                height: torem(100);
                line-height: torem(100);
                border-radius: torem(50);
            }

            .login-text {
                padding: torem(20) 0;
                color: #B2B2B2;
                font-size: torem(24);
                margin-top: torem(10);
            }
        }
    }

    .protocol {
        position: fixed;
        bottom: torem(50);
        width: 100%;
        text-align: center;
    }

    .back-btn {
        margin: torem(30) 0;
        font-size: torem(28);
        color: #B2B2B2;
    }

    .bottom-view {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: torem(24);
        height: torem(30);
        line-height: torem(30);
        color: #999999;

        .blue-text {
            color: royalblue;
        }
    }
    .radio-icon {
        font-size: torem(24);
        color: #428AF6;
        margin-right: torem(10);
        display: inline-flex;
        align-items: center;
    }
</style>
